<template>
  <div class="login">
    <div class="loginHeader">
      <span @click="loginReturn">
        <van-icon name="arrow-left" size=".5rem"/>
      </span>
      <span @click="register">
        <a style="font-size: 15px">注册</a>
      </span>
    </div>
    <div class="loginTitle">
      <p class="title">悠悠行旅账号登录</p>
    </div>
    <div class="loginContent">
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 50px auto 30px auto;">
          <van-button round block type="primary" native-type="submit">
            登  录
          </van-button>
        </div>
        <div class="loginOther">
          <a>手机号登录</a>
          <a>境外手机号登录</a>
        </div>
      </van-form>
    </div>
    <div class="loginFooter">
      <div class="footerThreeLogin">
        <img src="/images/wechat.png" alt="微信"/>
        <img src="/images/weibo.png" alt="微博"/>
        <img src="/images/qq.png" alt="QQ"/>
      </div>
      <p class="footerContent">
        登录即代表您同意我们的<a>服务协议</a>和<a>隐私政策</a>
      </p>
    </div>

  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    loginReturn() {
      this.$router.push("/person")
    },
    register() {
      this.$router.push("/register")
    }
  },
}
</script>

<style scoped>
.login {
  padding: .3rem;
}

.loginHeader {
  display: flex;
  justify-content: space-between;
}

.loginTitle {
  text-align: center;
  margin-top: 50px;
}

.title {
  font-size: 25px;
  color: #333333;
  line-height: 25px;
  font-weight: 400;
}

.loginContent {
  margin-top: 50px;
  background-color: #ffffff;
}

.loginOther {
  display: flex;
  justify-content: space-between;
  padding: 0 .3rem;
}

.loginOther >>> a {
  color: #333333;
  font-size: 15px;
}

.loginFooter {
  position: fixed;
  bottom: .5rem;
  width: 100%;
  margin-left: -.3rem;
}

.footerContent {
  text-align: center;
}

.footerThreeLogin >>> img {
  width: 38px;
  height: 38px;
}

.footerThreeLogin {
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
}
</style>